<template>
  <div class="app-container">
    <ContentWrap>
      <el-tabs v-model="activeTab" @tab-click="tabClick" style="margin-top: -10px;">
        <el-tab-pane label="分区" name="DFQ">
          <el-row :gutter="20">
            <el-col :span="4">
              <RegionTree ref="refDfqRegionTree" nodeType="1" :node-click="dfqRegionClick"/>
            </el-col>
            <el-col :span="20" class="content-container">
              <el-form :model="dfqQueryParams" ref="dfqQueryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="报表类型" prop="frozenType">
                  <el-radio-group v-model="dfqQueryParams.frozenType" @change="handleFrozenTypeChange">
                    <!-- <el-radio label="day">日</el-radio> -->
                    <el-radio label="month">月</el-radio>
                    <el-radio label="year">年</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" prop="startDate">
                  <el-date-picker :key="dfqDateType" v-model="dfqQueryParams.startDate" :type="dfqDateType" :value-format="dfqValueType"
                                  placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item>               
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- 表格 -->
               <!-- 供水量、售水量、无收益水量、漏损水量、校准漏损率、最高流速、时间、最低流速、时间、最高压力、最高时间、最低压力、最低时间  -->
              <el-table v-loading="dfqLoading" :data="dfqFreezeDataList" border size="mini" :height="getAvailableHeight"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="areaid">
                <el-table-column label="名称" min-width="150" align="center" prop="areaName" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <router-link :to="'/leakage/analysis-dfq/index/' + scope.row.areaid" class="link-type">
                      <span>{{ scope.row.areaName }}</span>
                    </router-link>
                  </template>
                </el-table-column>
                <el-table-column label="供水量(m³)" width="120" align="center" prop="inputFlow" sortable/>
                <el-table-column label="售水量(m³)" width="120" align="center" prop="saleWater" sortable/>
                <el-table-column label="无收益水量(m³)" width="140" align="center" prop="freeWater" sortable/>
                <el-table-column label="漏损水量(m³)" width="140" align="center" prop="uarl" sortable/>
                <!--<el-table-column label="校准漏损率(%)" width="120" align="center" prop="standardLs"/>-->
                <el-table-column label="最高流速" width="100" align="center" prop="areaLargestFlow"/>
                <!--<el-table-column label="最高流速时间" width="140" align="center" prop="areaLargestFlowTime"/>-->
                <el-table-column label="最低流速" width="100" align="center" prop="areaSmallestFlow"/>
                <el-table-column label="最低流速时间" width="140" align="center" prop="mnfTime"/>
                <el-table-column label="最高压力" width="100" align="center" prop="pipeMaxPressure"/>
                <!--<el-table-column label="最高压力时间"  width="140"align="center" prop="pipeMaxPressureTime"/>-->
                <el-table-column label="最低压力" width="100" align="center" prop="pipeMinPressure"/>
                <!--<el-table-column label="最低压力时间" width="140" align="center" prop="pipeMinPressureTime"></el-table-column>-->
              </el-table>
              <pagination :total="dfqTotal"
                          :page.sync="dfqQueryParams.pageNum"
                          :limit.sync="dfqQueryParams.pageSize"
                          @pagination="getDfqList"
                          size="mini"
                          layout="total, prev, pager, next, jumper"/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="DMA" name="DMA">
          <el-row :gutter="20">
            <el-col :span="4">
              <RegionTree ref="refDmaRegionTree" nodeType="1" :node-click="dmaRegionClick"/>
            </el-col>
            <el-col :span="20" class="content-container">
              <el-form :model="dmaQueryParams" ref="dmaQueryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="报表类型" prop="frozenType">
                  <el-radio-group v-model="dmaQueryParams.frozenType" @change="handleFrozenTypeChange">
                    <el-radio label="day">日</el-radio>
                    <el-radio label="month">月</el-radio>
                    <el-radio label="year">年</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" prop="startDate">
                  <el-date-picker :key="dmaDateType" v-model="dmaQueryParams.startDate" :type="dmaDateType" :value-format="dmaValueType"
                                  placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item>               
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- 表格 -->
               <!-- 选择日类型字段显示：供水量、物理漏水量、最低流速、时间、平均流速、平均流速占比）：
                  选中分区及其子分区下所有dma报表情况，字段包括：供水量、售水量、无收益水量、漏损水量、校准漏损率、最低流速、时间、最高压力、最高时间、最低压力、最低时间 -->
              <el-table v-loading="dmaLoading" :data="dmaFreezeDataList" border size="mini" :height="getAvailableHeight">
                <!-- 动静结合表头 -->
                <el-table-column
                  v-for="(item, index) in dmaColumnList"
                  :key="index"
                  :prop="item.prop"
                  :label="item.label"
                  :align="item.align ? item.align : 'left'"
                  :min-width="item.minWidth" :sortable="item.sortable">   
                  <template v-slot="scope">
                    <div v-if="item.prop === 'areaName'">
                      <router-link :to="'/leakage/analysis-dma/index/' + scope.row.areaid" class="link-type">
                        <span>{{ scope.row[item.prop] }}</span>
                      </router-link>
                    </div>
                    <div v-else>
                      {{ scope.row[item.prop] }}
                    </div>
                    
                  </template>
                </el-table-column>
                <!-- <el-table-column label="名称" width="120" align="center" prop="areaName"></el-table-column>
                <el-table-column label="供水量(m³)" width="120" align="center" prop="freezetime" sortable/>
                <el-table-column label="售水量(m³)" width="120" align="center" prop="saleWater" sortable/>
                <el-table-column label="无收益水量(m³)" width="140" align="center" prop="freeWater" sortable/>
                <el-table-column label="漏损水量(m³)" width="140" align="center" prop="freezetime" sortable/>
                <el-table-column label="校准漏损率(%)" width="120" align="center" prop="freezetime"/>               
                <el-table-column label="最低流速" width="100" align="center" prop="freezetime"/>
                <el-table-column label="最低流速时间" width="100" align="center" prop="freezetime"/>
                <el-table-column label="最高压力" width="100" align="center" prop="freezetime"/>
                <el-table-column label="最高压力时间"  width="100"align="center" prop="freezetime"/>
                <el-table-column label="最低压力" width="100" align="center" prop="inputFlow"/>
                <el-table-column label="最低压力时间" width="100" align="center" prop="hb"></el-table-column> -->
              </el-table>
              <pagination :total="dmaTotal"
                          :page.sync="dmaQueryParams.pageNum"
                          :limit.sync="dmaQueryParams.pageSize"
                          @pagination="getDmaList"
                          size="mini"
                          layout="total, prev, pager, next, jumper"/>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
  </div>
</template>

<script>
import moment from 'moment'
import RegionTree from "@/views/leakage/components/RegionTree.vue";
import WaterSupplyMonitor from '../components/WaterSupplyMonitor.vue'
import WaterProdsaleRate from '../components/WaterProdsaleRate.vue'
import WaterBalanceAnalysis from '../components/WaterBalanceAnalysis.vue'
import WaterSupplyStatistics from '../components/WaterSupplyStatistics.vue'
import {getZoneTagByAreaId} from '@/api/leakage/zoneTag'
import drawregion from "@/components/L7Maps/drawregion.vue";
import {getDfqDmaSupplyMonitorData} from '@/api/leakage/terminalHistoryData';
import {listFreezeDfqReport} from "@/api/leakage/freezeDfq";
import {listFreezeDmaReport} from "@/api/leakage/freezeDma";
import {getZoneJoinTerminals} from "@/api/leakage/zoneJoin";

export default {
  name: 'dfq',
  dicts: ['warn_handle_status', 'warn_param_type', 'warn_target_type', 'warn_status', 'warn_type'],
  components: {
    drawregion, RegionTree,
    WaterSupplyMonitor, WaterProdsaleRate,
    WaterBalanceAnalysis, WaterSupplyStatistics
  },
  data() {
    return {
      screenHeight: null,
      activeTab:'DFQ',
      dfqEditingZone: undefined,
      // 遮罩层
      dfqLoading: false,
      // 总条数
      dfqTotal: 0,
      // 查询参数
      dfqQueryParams: {
        pageNum: 1,
        pageSize: 20,
        areaId: null,
        frozenType: 'month',
        startDate: moment().subtract(1, 'month').format("yyyy-MM"),
      },
      dfqDateType: 'month',
      dfqValueType: 'yyyy-MM',
      //大分区表格数据
      dfqFreezeDataList: [],
      //tab DMA
      dmaEditingZone:undefined,
      dmaLoading: false,// 遮罩层
      // 总条数
      dmaTotal: 0,
      // 查询参数
      dmaQueryParams: {
        pageNum: 1,
        pageSize: 20,
        areaId: null,
        frozenType: 'day',
        startDate: moment().subtract(1, 'day').toDate(),//moment().subtract(1, 'day').format("yyyy-MM-dd"),
      },
      dmaColumnList:[],//动态列
      dmaDateType: 'date',
      dmaValueType: 'yyyy-MM-dd',
      //大分区表格数据
      dmaFreezeDataList: [],
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.activeTab === 'DFQ'){
        this.dfqQueryParams.pageNum = 1;
        // this.dfqQueryParams.startDate = moment().subtract(1, 'month').format("yyyy-MM");
        this.getDfqList();
      }else{
        this.dmaQueryParams.pageNum = 1;
        // this.dmaQueryParams.startDate = moment().subtract(1, 'day').format("yyyy-MM-dd");
        //切换表头
        if(this.dmaQueryParams.frozenType === 'day'){
          this.dmaColumnList=[{prop:'areaName',label:'名称',align:'center',minWidth:120},
                              {prop:'inputFlow',label:'供水量(m³)',align:'center',minWidth:120,sortable:true},
                              {prop:'uarl',label:'物理漏水量(m³)',align:'center',minWidth:140,sortable:true},
                              {prop:'mnfDay',label:'最低流速',align:'center',minWidth:100,sortable:true},
                              {prop:'mnfTime',label:'最低流速时间',align:'center',minWidth:140,sortable:true},
                              {prop:'averageTraffic',label:'平均流速',align:'center',minWidth:100,sortable:true},
                              {prop:'mnfAveragePercentage',label:'平均流速占比(%)',align:'center',minWidth:100,sortable:true}];
        }else{
          //供水量、售水量、无收益水量、漏损水量、校准漏损率、最低流速、时间、最高压力、最高时间、最低压力、最低时间
          this.dmaColumnList=[{prop:'areaName',label:'名称',align:'center',minWidth:120},
                              {prop:'inputFlow',label:'供水量(m³)',align:'center',minWidth:120,sortable:true},
                              {prop:'saleWater',label:'售水量(m³)',align:'center',minWidth:120,sortable:true},
                              {prop:'freeWater',label:'无收益水量(m³)',align:'center',minWidth:140,sortable:true},
                              {prop:'uarl',label:'漏损水量(m³)',align:'center',minWidth:140,sortable:true},
                              //{prop:'standardLs',label:'校准漏损率(%)',align:'center',minWidth:120},
                              {prop:'areaSmallestFlow',label:'最低流速',align:'center',minWidth:100},
                              //{prop:'areaSmallestFlowTime',label:'最低流速时间',align:'center',minWidth:140},
                              {prop:'pipeMaxPressure',label:'最高压力',align:'center',minWidth:100},
                              //{prop:'pipeMaxPressureTime',label:'最高压力时间',align:'center',minWidth:140},
                              {prop:'pipeMinPressure',label:'最低压力',align:'center',minWidth:100},
                              //{prop:'pipeMinPressureTime',label:'最低压力时间',align:'center',minWidth:140}
                              ];
        }
        this.getDmaList();
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm(this.activeTab === 'DFQ' ? "dfqQueryForm" : "dmaQueryForm");
      this.handleQuery();
    },
    /** 冻结类型选择 */
    handleFrozenTypeChange(val) {
      if(this.activeTab === 'DFQ'){
        if (val === 'day') {
          this.dfqDateType = 'date'
          this.dfqValueType = 'yyyy-MM-dd'
        } else if (val === 'month') {
          this.dfqDateType = 'month'
          this.dfqValueType = 'yyyy-MM'
        } else {
          this.dfqDateType = 'year'
          this.dfqValueType = 'yyyy'
        }
        this.dfqQueryParams.startDate = moment().subtract(1, val).format(this.dfqValueType);
      }else{
        if (val === 'day') {
          this.dmaDateType = 'date'
          this.dmaValueType = 'yyyy-MM-dd'
        } else if (val === 'month') {
          this.dmaDateType = 'month'
          this.dmaValueType = 'yyyy-MM'
        } else {
          this.dmaDateType = 'year'
          this.dmaValueType = 'yyyy'
        }
        this.dmaQueryParams.startDate = val === 'day' ? moment().subtract(1, val).toDate() : moment().subtract(1, val).format(this.dmaValueType);
      }     
    },
    tabClick(tab, event) {
      const query = {
        areaId: this.dfqEditingZone.areaId,
      }
      if (this.activeTab === 'DFQ') {
       
      } else if (this.activeTab === 'DMA') {
        
      }
      this.handleQuery();
    },
    // 大分区
    /** 查询实时数据采集（大）列表 */
    getDfqList() {
      this.dfqLoading = true;
      listFreezeDfqReport(this.dfqQueryParams).then(res => {
        this.dfqFreezeDataList = res.rows;
        this.dfqTotal = res.total;
        this.dfqLoading = false;
      });
    },
    dfqRegionClick(node) {
      console.log(node)
      if (node.levelType !== '1') {
        this.dfqEditingZone = undefined
        this.$message.error('请选择大分区节点')
      } else {
        this.dfqEditingZone = node
        this.dfqQueryParams.areaId = node.areaId
        this.getDfqList()
      }
    },
    getDfqZoneName(id) {
      return this.$refs.refDfqRegionTree.getZoneName(id)
    },
    // DMA
    getDmaList() {
      this.dmaLoading = true;
      listFreezeDmaReport(this.dmaQueryParams).then(res => {
        this.dmaFreezeDataList = res.rows;
        this.dmaTotal = res.total;
        this.dmaLoading = false;
      });
    },
    dmaRegionClick(node) {
      if (node.levelType !== '1') {
        this.dmaEditingZone = undefined
        this.$message.error('请选择大分区节点')
      } else {
        this.dmaEditingZone = node
        this.dmaQueryParams.areaId = node.areaId
        this.getDmaList()
      }
    },
    getDmaZoneName(id) {
      return this.$refs.refDmaRegionTree.getZoneName(id)
    },
    resizeRegionHeight(){
      let rtHeight = this.screenHeight - 45;
      this.$refs.refDfqRegionTree.resizeHeight(rtHeight);
      this.$refs.refDmaRegionTree.resizeHeight(rtHeight);
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getAvailableHeight() {
      return this.screenHeight - 266
    }
  },
  mounted() {
    this.resizeRegionHeight();
    window.onresize = () => {
      this.screenHeight = document.body.clientHeight
      this.resizeRegionHeight();
    }
    setTimeout(() => {
      // 处理首页传参跳转
      const id = this.$route.query.id
      if (id) {
        const node = this.$refs.refDfqRegionTree.getZoneNode(id + '')
        if (node) { 
          this.dfqRegionClick(node)
        }
      }
    }, 1000)
  }
}

</script>

<style scoped lang="scss">
.option-tool {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

::v-deep .l7-popup .l7-popup-content {
  position: relative;
  padding: 16px;
  font-size: 14px;
  color: #FFFFFF;
  background: #5e72af;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

::v-deep .l7-popup-anchor-bottom .l7-popup-tip {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  border-top-color: #5e72af;
  border-bottom: none;
}
</style>
